Applying Hyperlink Target to a Frame

A hyperlink is used to create a link between Web pages. It takes a reference of a Web page by using the href attribute of the <a> tag. When the user clicks a hyperlink on a Web page, the referenced page is opened within the same document, in another document, or somewhere else on the World Wide Web. To specify the target location of the Web page to open, you can use the target attribute inside the <a> tag.

In this section, you learn to apply hyperlink targets to a frame by using a named frame and a predefined target name.

Using a Name Frame as Hyperlink Targets

Named frames are frames for which you assign a name. When you want to use a named frame as a hyperlink target, you have to pass the name of the frame to the target attribute of the <a> tag. When you click the hyperlink, the referenced page opens in the target in the target frame that you assign in the target attribute.

Let’s do the following steps to use a named frame as hyperlink targets:


<!DOCTYPE html>
<head>
    <title>Named Frames</title>
</head>
<iframe  src=”Mainpage.html” ></iframe>
<iframe src=”Defaultpage.html” name=”display”></iframe>
</html>

Save the document with the name NamedFrame.html and open on browser.

Creating a Main Page:


<!DOCTYPE html>
<head>
    <title>Page</title>
</head>
<body>
<a href=”page1.html” target=”display”>
<h3> Page 1<h3> </a><br>
<a href=”page2.html” target=”display”>
<h3> Page 2<h3> </a><br>
<a href=”page3.html” target=”display”>
<h3> Page 3<h3> </a>
</body>
</html>

Save the document as MainPage.html.

Creating a Default Page:


<!DOCTYPE html>
<head>
    <title>Page</title>
</head>
<body>
    <h1 align=”center”>Click A Hyperlink</h1>
</body>
</html>

Save the document as DefaultPage.html and open on browser.

Click a hyperlink in the left frame. In our case, we have clicked the page 1 hyperlink. The page1.html file is loaded in the right frame. As shown in below snapshot.

Note: the hyperlink color changes from blue to purple when you click a hyperlink for the first tim.

Using a Predefined Target Name as Hyperlink Targets

You can use predefined target names if you do not want that the Web page to open in named frame. HTML provides the facility to use predefined target names to set the target locations for the Web page to open. Predefined target names take one of the four values: _blank, _parent, and _top. When you want to use a predefined target name as hyperlink target, you have to pass one of the four values (_blank, _self, _parent, or _top) to the target attribute. If you click the hyperlink, the referenced page opens in the target frame that you assign in the target attribute. For example, if you use _blank, the Web page opens in a new blank window.

Let’s do the following steps to use a predefined target name as hyperlink targets:


<!DOCTYPE html>
<head>
    <title>Page</title>
</head>
<body>
    <a href=”page1.html” target=”_blank”>
    <h1> Page 1</h1> </a><br>
    <a href=”page2.html” target=”_blank”>
    <h1> Page 2</h1> </a><br>
    <a href=”page3.html” target=”_blank”>
    <h1> Page 3</h1> </a><br>

</body>
</html>

Save the document with the name PredefinedTarget.html and open on browser:

Click a hyperlink on browser. In our case, we have clicked the Page 1 hyperlink. The Page 1.html file is loaded in a new window.